<template>
  <div class="top">
    <div class="tleft">
      <h1>我的</h1>
    </div>
    <div class="tright">
      <van-popover
        placement="bottom-end"
        v-model:show="showPopover"
        :actions="actions"
        @select="onSelect"
      >
        <template #reference>
          <van-button
            type="primary"
            show-arrow="false"
            style="background-color: #e54847; border: none; overflow: hidden"
            ><van-icon name="wap-nav"
          /></van-button>
        </template>
      </van-popover>
      <van-popover placement="top-end " />
    </div>
  </div>
  <div class="centent" v-if="dlu !== null" @click="login()">
    <div class="img">
      <img
        src="https://img.meituan.net/maoyanuser/675d3a8bbe27febcf1ccd8c2a25d891210399.png"
        alt=""
      />
    </div>
  </div>
  <div class="centent" v-if="dlu === null" @click="$router.push('/loginin')">
    <div class="img"></div>
    <h1>去登陆</h1>
  </div>
  <div class="bottom">
    <div class="dingdan" v-if="dlu!==null">
      <div class="text">
        <div class="tzuo"></div>
        <div class="tzu" >我的订单</div>
        <div class="tzuo"></div>
      </div>
      <div class="icon">
        <div class="iconl" @click="$router.push('dingdan')">
          <span>
            <img
              src="https://obj.pipi.cn/festatic/asgard/resources/images/dpmmweb/mycenter/movie.png"
              alt=""
            />
          </span>
          <p>电影</p>
        </div>
        <div class="iconr">
          <span>
            <img
              src="https://obj.pipi.cn/festatic/asgard/resources/images/dpmmweb/mycenter/store.png"
              alt=""
            />
          </span>
          <p>商城</p>
        </div>
      </div>
    </div>
    <div class="dingdan"></div>
    <div class="youhui">
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div class="you">
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
import { showConfirmDialog } from "vant";

const showPopover = ref(false);
const route = useRoute();
const router = useRouter();
// 通过 actions 属性来定义菜单选项
const actions = [
  { text: "首页" },
  { text: "榜单" },
  { text: "热点" },
  { text: "商城" },
  { text: "退出" },
];
const onSelect = (action) => {
  if (action.text == "退出") {
    localStorage.removeItem("timestamp");
    router.push("/loginin");
  }
};
const coupon = {
  available: 1,
  condition: "无门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onChange = (index) => {
  showList.value = false;
  chosenCoupon.value = index;
};
const onExchange = (code) => {
  coupons.value.push(coupon);
};

const dlu = ref([]);
dlu.value = JSON.parse(localStorage.getItem("timestamp"));
const gmdd = () => {
   if (dlu.value !== null) {
    router.push("/dingdan");
  }
  showConfirm();
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 8vh;
  line-height: 8vh;
  font-size: 18rem;
  color: #fff;
  background-color: #e54847;
  .tleft {
    width: 75vw;
    text-align: center;
    margin-left: 50rem;
  }
  .tright {
    margin-top: 4rem;
    line-height: 8rem;
    i {
      font-size: 18rem;
    }
  }
}
:deep(.van-popover--light) {
  z-index: 2004;
  position: absolute;
  right: -80px;
  top: -7.5px;
}
.centent {
  width: 100vw;
  height: 23vh;
  background-color: #e54847;
  padding: 30rem 0 0 0;
  .img {
    width: 66rem;
    height: 66rem;
    background-color: #fff;
    border-radius: 50%;
    margin: auto auto;
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: block;
    }
  }
  h1{
      font-size: 18rem;
      text-align: center;
    }
}
.bottom {
  width: 100vw;
  border-top: 12rem solid #f4f4f4;
  .dingdan {
    width: 370rem;
    margin: 0 auto;
    .text {
      display: flex;
      justify-content: center;
      margin: -14rem auto 20rem;
      .tzuo {
        display: block;
        width: 40rem;
        margin-bottom: 13rem;
        border-bottom: 1rem solid #ccc;
      }
      .tzu {
        font-size: 16rem;
        padding-top: 20rem;
        margin: 5rem 10rem;
      }
    }
    .icon {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding-bottom: 25rem;
      border-bottom: 10rem solid #f4f4f4;
      span {
        img {
          width: 42rem;
          height: 42rem;
        }
      }
    }
  }
  .you {
    padding-bottom: 140rem;
    background-color: #f4f4f4;
  }
}
</style>
